<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/layui/css/layui.css}" rel="stylesheet"/>
<body class="gray-bg">
	
	<div class="container-div ui-layout-center" id="applyContainer" style="padding:0;">
        <div style="margin: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);background: #fff;padding: 15px 0px;border-radius: 5px;">
            <strong style="font-size:17px;padding:0 16px;">审批历史</strong>
            <table style="border:1px solid #ccc !important;border-left:none;margin:5px 15px;width:750px;">
                <tr style="background: #1f90d8c4;color: #fff;">
                    <th style="border-left:1px solid #ccc;padding:5px;">流程名称</th>
                    <th style="border-left:1px solid #ccc;padding:5px;">申请人工号</th>
                    <th style="border-left:1px solid #ccc;padding:5px;">申请人</th>
                    <th style="border-left:1px solid #ccc;padding:5px;">计划名称</th>
                    <th style="border-left:1px solid #ccc;padding:5px;">审批人</th>
                    <th style="border-left:1px solid #ccc;padding:5px;">报名原因</th>
                    <th style="border-left:1px solid #ccc;padding:5px;">备注</th>
                    <th style="border-left:1px solid #ccc;padding:5px;">状态</th>
                </tr>
                <tr v-for="item in planDetail" style="border-top:1px solid #ccc;">
                    <td style="width:100px;border-left:1px solid #ccc;padding:5px;">{{item.flowName}}</td>
                    <td style="width:100px;border-left:1px solid #ccc;padding:5px;">{{item.applyUserId}}</td>
                    <td style="width:100px;border-left:1px solid #ccc;padding:5px;">{{item.applyUserName}}</td>
                    <td style="width:190px;border-left:1px solid #ccc;padding:5px;">{{item.planName}}</td>
                    <td style="width:100px;border-left:1px solid #ccc;padding:5px;">{{item.approvalUserName}}</td>
                    <td style="width:100px;border-left:1px solid #ccc;padding:5px;">{{item.signRemark}}</td>
                    <td style="width:100px;border-left:1px solid #ccc;padding:5px;">{{item.remark}}</td>
                    <td style="width:50px;border-left:1px solid #ccc;padding:5px;">{{item.outcome}}</td>
                </tr>
            </table>
        </div>
    </div>
	<div th:include="include :: footer"></div>
	<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
	<script th:inline="javascript">
	    new Vue({
	        el:"#applyContainer",
	        data:{
	            planDetail:[]
	        },
	        mounted:function(){
	            this.applyList();
	        },
	        methods:{
	           applyList: function(){
	                var _this=this;
	                $.ajax({
                        url: location.origin+"/flow/mgr/list/process?processId="+sessionStorage.getItem("processId"),
                        type: "post",
                        dataType: "json",
                        success: function(result) {
                            _this.planDetail=result;
                        },
                        error: function(){
                            $.modal.alertError(result.msg);
                        }
                    })
	            }
	        }
	    })

	</script>
</body>
</html>